<template>
  <view class="security-page">
    <scroll-view class="content-scroll" scroll-y>
      <!-- 安全信息 -->
      <view class="security-section">
        <view class="security-card">
          <u-cell-group :border="false">
            <u-cell title="修改密码" :isLink="true" @click="handleChangePassword">
              <template #icon>
                <u-icon name="lock" size="18" color="#10b981" style="margin-right: 12rpx;" />
              </template>
            </u-cell>
            <u-cell title="绑定手机" :isLink="true" @click="handleBindPhone">
              <template #icon>
                <u-icon name="phone" size="18" color="#10b981" style="margin-right: 12rpx;" />
              </template>
              <template #value>
                <text class="bind-status">138****5678</text>
              </template>
            </u-cell>
            <u-cell title="绑定邮箱" :isLink="true" @click="handleBindEmail">
              <template #icon>
                <u-icon name="email" size="18" color="#10b981" style="margin-right: 12rpx;" />
              </template>
              <template #value>
                <text class="bind-status unbind">未绑定</text>
              </template>
            </u-cell>
          </u-cell-group>
        </view>
      </view>

      <!-- 登录记录 -->
      <view class="record-section">
        <text class="section-title">最近登录记录</text>
        <view class="record-list">
          <view 
            v-for="(record, index) in loginRecords" 
            :key="index"
            class="record-item"
          >
            <view class="record-icon">
              <u-icon name="phone" size="20" color="#10b981" />
            </view>
            <view class="record-content">
              <text class="record-device">{{ record.device }}</text>
              <text class="record-info">{{ record.location }} · {{ record.time }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const loginRecords = ref([
  {
    device: 'iPhone 13',
    location: '山东济宁',
    time: '2024-10-20 14:30'
  },
  {
    device: '微信小程序',
    location: '山东济宁',
    time: '2024-10-19 09:15'
  },
  {
    device: 'Android',
    location: '山东济宁',
    time: '2024-10-18 18:20'
  }
])

const handleChangePassword = () => {
  uni.showToast({ title: '修改密码功能开发中', icon: 'none' })
}

const handleBindPhone = () => {
  uni.showToast({ title: '绑定手机功能开发中', icon: 'none' })
}

const handleBindEmail = () => {
  uni.showToast({ title: '绑定邮箱功能开发中', icon: 'none' })
}
</script>

<style scoped lang="scss">
.security-page {
  min-height: 100vh;
  background-color: #f9fafb;
}

.content-scroll {
  height: 100vh;
}

.security-section {
  padding: 32rpx 24rpx;
}

.security-card {
  background-color: #ffffff;
  border-radius: 24rpx;
  overflow: hidden;
}

.bind-status {
  font-size: 26rpx;
  color: var(--text-primary);
  
  &.unbind {
    color: var(--text-secondary);
  }
}

.record-section {
  padding: 0 24rpx 32rpx;
}

.section-title {
  display: block;
  font-size: 28rpx;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 16rpx;
  padding-left: 8rpx;
}

.record-list {
  background-color: #ffffff;
  border-radius: 24rpx;
  padding: 24rpx;
}

.record-item {
  display: flex;
  align-items: flex-start;
  gap: 20rpx;
  padding: 24rpx 0;
  border-bottom: 2rpx solid #f3f4f6;
  
  &:last-child {
    border-bottom: none;
  }
}

.record-icon {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background-color: rgba(16, 185, 129, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.record-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.record-device {
  font-size: 28rpx;
  font-weight: 500;
  color: var(--text-primary);
}

.record-info {
  font-size: 24rpx;
  color: var(--text-secondary);
}
</style>

